* { box-sizing: border-box; }

html, body { margin: 0; }

div#root {
  padding: 10px;
  height: 100vh;

  display: flex;
  flex-direction: column;
}

div#root > * + * { margin-top: 5px; }

div.controls { display: flex; align-items: center; }

div.controls > * + * { margin-left: 5px; }

div.controls > div {
  display: flex;
  align-items: center;

  height: 100%;
  padding: 5px 8px;
}

div.controls > div >  * + * { margin-left: 5px; }

form { display: flex; margin-top: 0px; }

input[type=checkbox] { margin-right: 0; }

input, textarea, div.controls > div {
  border: 1px solid hsl(0deg 0% 90%);
  background-color: hsl(240deg 0% 98%);
  border-radius: 3px;
}

input, textarea { padding: 10px; font-family: monospace; }

input#play { width: 50px; }

input#command, textarea { width: 100%; }

textarea { height: 100%; resize: none; }
